import XtxBread from "@/components/library/xtxBread";
import GoodsRelevant from "./components/GoodsRelevant";
import XtxBreadItem from "@/components/library/xtxBreadItem";
import "./index.scss";
import { useFindGoods } from "@/apis/product";
import { useParams } from "react-router-dom";
import { createContext, useEffect, useState } from "react";
import GoodsImage from "./components/GoodsImage";
import GoodsSales from "./components/GoodsSales";
import GoodsName from "./components/GoodsName";
import GoodsSku from "./components/GoodsSku";
import XtxNumber from "@/components/library/xtxNumber";
import XtxButton from "@/components/library/xtxButton";
import GoodsTabs from "./components/GoodsTabs";
import GoodsHot from "./components/GoodsHot";
import GoodsWarn from "./components/GoodsWarn";
export const GoodsContext = createContext<any>(null);
function Goods() {
  const [goods, setGoods] = useState<any>();
  const { id } = useParams();
  const { result } = useFindGoods({ id });
  useEffect(() => {
    setGoods(result);
  }, [result]);

  const changeSku = function (playload: any) {
    if (playload.skuId) {
      setGoods({
        ...goods,
        oldPrice: playload.oldPrice,
        price: playload.price,
        inventory: playload.inventory,
      });
    }
  };
  const [count, setCount] = useState(1);
  const updateCount = function (playload: number) {
    setCount(playload);
  };
  {
    return (
      goods?.categories && (
        <div className="xtx-goods-page">
          <div className="container">
            <XtxBread>
              <XtxBreadItem to="/">首页</XtxBreadItem>
              <XtxBreadItem to={`/category/${goods.categories[0].id}`}>
                {goods.categories[0].name}
              </XtxBreadItem>
              <XtxBreadItem to={`/category/sub/${goods.categories[1].id}`}>
                {goods.categories[1].name}
              </XtxBreadItem>
            </XtxBread>
            <div className="goods-info">
              <div className="media">
                <GoodsImage images={goods.mainPictures}></GoodsImage>
                <GoodsSales />
              </div>
              <div className="spec">
                <GoodsName goods={goods} />
                <GoodsSku goods={goods} emitSku={changeSku}></GoodsSku>
                <XtxNumber
                  count={count}
                  max={goods.inventory}
                  updateCount={updateCount}
                ></XtxNumber>
                <XtxButton type="primary" style={{ marginTop: "20px" }}>
                  加入购物车
                </XtxButton>
              </div>
            </div>
            <GoodsRelevant goodsId={goods.id} />
            <div className="goods-footer">
              <div className="goods-article">
                <GoodsContext.Provider value={goods}>
                  <div className="goods-tabs">
                    <GoodsTabs></GoodsTabs>
                  </div>
                </GoodsContext.Provider>
                <div className="goods-warn">
                  <GoodsWarn />
                </div>
              </div>
              <div className="goods-aside">
                <GoodsHot type={1} />
                <GoodsHot type={2} />
                <GoodsHot type={3} />
              </div>
            </div>
          </div>
        </div>
      )
    );
  }
}

export default Goods;
